<template>
  <div class="content-area">
    <div class="content-container">
      <!-- 默认首页内容 -->
      <div v-if="currentPage === 'home'" class="page-content home-content">
        <div class="hero-section">
          <h1 class="hero-title">欢迎来到崩坏3世界</h1>
          <p class="hero-subtitle">体验最震撼的3D动作游戏</p>
          <div class="hero-buttons" src="https://www.bh3.com/">
            <button class="primary-btn">立即游戏</button>
            <!-- <button class="secondary-btn">了解更多</button> -->
          </div>
        </div>
        
        <div class="features-grid">
          <div class="feature-card" @click="navigateToMedia">
            <div class="feature-icon">🎮</div>
            <h3>视听中心</h3>
            <p>精彩视频与音乐体验</p>
          </div>
          <div class="feature-card" @click="navigateToCharacter">
            <div class="feature-icon">👥</div>
            <h3>丰富角色</h3>
            <p>多样化的女武神角色</p>
          </div>
          <div class="feature-card" @click="navigateToStage">
            <div class="feature-icon">🌟</div>
            <h3>精美画面</h3>
            <p>顶级3D渲染技术</p>
          </div>
        </div>
      </div>
      
      <!-- 新闻页面 -->
      <div v-else-if="currentPage === 'news'" class="page-content news-content">
        <NewsDetail 
          v-if="showNewsDetail"
          :article="currentNewsArticle"
          :allArticles="allNewsArticles"
          @go-back="goBackToNewsList"
          @view-article="viewNewsArticle"
        />
        <NewsPage 
          v-else
          @show-detail="showNewsDetailHandler"
        />
      </div>
      
      <!-- 角色页面 -->
      <div v-else-if="currentPage === 'character'" class="page-content character-content fullscreen-content">
        <HeroPage />
      </div>
      
      <!-- 舞台页面 -->
      <div v-else-if="currentPage === 'stage'" class="page-content stage-content">
        <ScenePage />
      </div>
      
      <!-- 视听中心页面 -->
      <div v-else-if="currentPage === 'media'" class="page-content media-content">
        <div class="media-header">
          <div class="media-logo">
            <img src="https://fastcdn.mihoyo.com/mi18n/bh3_cn/m20230317hy14h0glc0/upload/fa04b7462dcee3e717720a0f22485dd6_8521031719796373241.png" alt="视听中心" />
          </div>
       
        </div>
        
        <div class="media-layout">
          <!-- 主要内容区域 -->
          <div class="media-main">
            <!-- 视频区域 -->
            <div class="media-section video-section">
              <div class="section-content">
                <div class="main-video">
                  <div class="video-container">
                    <video 
                      ref="mainVideoPlayer"
                      class="video-player" 
                      :src="currentVideo ? currentVideo.url : ''"
                      :poster="'https://uploadstatic.mihoyo.com/contentweb/20210517/2021051715152250556.jpg?x-oss-process=image/resize,w_475'"
                      @click="playMainVideo"
                    ></video>
                    <div 
                      v-if="!isMainVideoPlaying" 
                      class="video-poster-overlay"
                      @click="playMainVideo"
                    >
                      <div class="main-play-button">
                        <div class="play-icon-large">▶</div>
                      </div>
                    </div>
                  </div>
                  <div class="video-info">
                    <h3>{{ currentVideo ? currentVideo.title : '' }}</h3>
                    <p>{{ currentVideo ? currentVideo.description : '' }}</p>
                  </div>
                </div>
                <!-- 视频列表 -->
                <div class="video-list">
                  <div 
                    v-for="(video, index) in videoList" 
                    :key="index"
                    class="video-thumbnail"
                    :class="{ active: currentVideoIndex === index }"
                    @click="switchVideo(index)"
                  >
                    <img 
                      class="thumbnail-poster"
                      :src="video.poster"
                      :alt="video.title"
                    />
                    <div class="thumbnail-overlay">
                      <div class="play-icon">▶</div>
                    </div>
                  </div>
                </div>
                <div class="video-label">视频</div>
              </div>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="media-sidebar">
              <!-- 壁纸区域 -->
              <div class="media-section wallpaper-section">
                <div class="section-content">
                  <div class="wallpaper-grid">
                    <div class="wallpaper-item" @click="goToWallpaperPage">
                      <img 
                        class="wallpaper-image"
                        src="https://uploadstatic.mihoyo.com/contentweb/20210817/2021081721213499357.png?x-oss-process=image/resize,w_1024"
                        alt="壁纸"
                      />
                      <div class="wallpaper-overlay">
                        <div class="wallpaper-text">查看更多壁纸</div>
                      </div>
                    </div>
                  </div>
                  <div class="section-label">壁纸</div>
                </div>
              </div>
              
              <!-- 漫画区域 -->
              <div class="media-section manga-section">
                <div class="section-content">
                  <div class="manga-item" @click="goToComicSite">
                    <img 
                      class="manga-image"
                      src="https://fastcdn.mihoyo.com/content-v2/bh3/122054/c22fec52389366241a87bc2d1748de0a_4456626538822130360.jpg"
                      alt="崩坏3漫画"
                    />
                    <div class="manga-overlay">
                      <div class="manga-text">阅读漫画</div>
                    </div>
                  </div>
                  <div class="section-label">漫画</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 壁纸页面 -->
      <div v-else-if="currentPage === 'wallpaper'" class="page-content wallpaper-content">
        <h2 class="page-title">精美壁纸</h2>
        <div class="wallpaper-gallery">
          <div 
            v-for="(wallpaper, index) in wallpaperList" 
            :key="index"
            class="wallpaper-gallery-item"
          >
            <img 
              :src="wallpaper.url"
              :alt="wallpaper.title"
              class="wallpaper-gallery-image"
            />
            <div class="wallpaper-info">
              <h4>{{ wallpaper.title }}</h4>
            </div>
          </div>
        </div>
        <button class="back-btn" @click="goBackToMedia">返回视听中心</button>
      </div>
      
      <!-- 用户管理页面 -->
      <div v-else-if="currentPage === 'user-management'" class="page-content user-management-content">
        <UserManagement />
      </div>
      
      <!-- 英雄管理页面 -->
      <div v-else-if="currentPage === 'hero-management'" class="page-content hero-management-content">
        <HeroManagement />
      </div>
      
      <!-- 场景管理页面 -->
      <div v-else-if="currentPage === 'scene-management'" class="page-content scene-management-content">
        <SceneManagement />
      </div>
      
      <!-- 武器展示页面 -->
        <div v-else-if="currentPage === 'weapon'" class="page-content weapon-content">
          <WeaponDisplay />
        </div>
        
        <!-- 武器管理页面 -->
        <div v-else-if="currentPage === 'weapon-management'" class="page-content weapon-content">
          <WeaponPage />
        </div>
      
      <!-- 武器管理页面 -->
      <div v-else-if="currentPage === 'weapon-management'" class="page-content weapon-management-content">
        <WeaponPage />
      </div>
      
      <!-- 技能管理页面 -->
      <div v-else-if="currentPage === 'skill-management'" class="page-content skill-management-content">
        <SkillManagement />
      </div>
      
      <!-- 个人中心页面 -->
      <div v-else-if="currentPage === 'profile'" class="page-content profile-content">
        <div class="profile-container">
          <div class="profile-header">
            <div class="profile-avatar">
              <img v-if="userStore.userInfo?.userAvatar" 
                   :src="userStore.userInfo.userAvatar" 
                   :alt="userStore.userInfo.userName" />
              <div v-else class="default-profile-avatar">
                {{ (userStore.userInfo?.userName || userStore.userInfo?.userAccount || 'U').charAt(0).toUpperCase() }}
              </div>
            </div>
            <div class="profile-info">
              <h2 class="profile-name">{{ userStore.userInfo?.userName || userStore.userInfo?.userAccount }}</h2>
              <p class="profile-role">{{ userStore.isAdmin ? '管理员' : '普通用户' }}</p>
              <p class="profile-account">账号：{{ userStore.userInfo?.userAccount }}</p>
            </div>
          </div>
          
          <div class="profile-sections">
            <div class="profile-section">
              <h3>基本信息</h3>
              <div class="info-grid">
                <div class="info-item">
                  <label>用户名</label>
                  <span>{{ userStore.userInfo?.userName || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <label>账号</label>
                  <span>{{ userStore.userInfo?.userAccount }}</span>
                </div>
                <div class="info-item">
                  <label>角色</label>
                  <span>{{ userStore.isAdmin ? '管理员' : '普通用户' }}</span>
                </div>
                <div class="info-item">
                  <label>个人简介</label>
                  <span>{{ userStore.userInfo?.userProfile || '暂无简介' }}</span>
                </div>
              </div>
            </div>
            
            <div class="profile-section">
              <h3>账户统计</h3>
              <div class="stats-grid">
                <div class="stat-card">
                  <div class="stat-number">{{ Math.floor(Math.random() * 100) + 1 }}</div>
                  <div class="stat-label">登录次数</div>
                </div>
                <div class="stat-card">
                  <div class="stat-number">{{ Math.floor(Math.random() * 30) + 1 }}</div>
                  <div class="stat-label">活跃天数</div>
                </div>
                <div class="stat-card">
                  <div class="stat-number">{{ userStore.isAdmin ? '高级' : '普通' }}</div>
                  <div class="stat-label">用户等级</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 设置页面 -->
      <div v-else-if="currentPage === 'settings'" class="page-content settings-content">
        <div class="settings-container">
          <div class="settings-header">
            <h2>系统设置</h2>
            <p>管理您的账户设置和偏好</p>
          </div>
          
          <div class="settings-sections">
            <div class="settings-section">
              <h3>账户设置</h3>
              <div class="settings-group">
                <div class="setting-item">
                  <div class="setting-info">
                    <label>个人信息</label>
                    <p>编辑您的昵称、头像和个人简介</p>
                  </div>
                  <button class="setting-btn" @click="showEditProfile">编辑</button>
                </div>
              </div>
            </div>
            
            <div class="settings-section">
              <h3>安全设置</h3>
              <div class="settings-group">
                <div class="setting-item">
                  <div class="setting-info">
                    <label>修改密码</label>
                    <p>定期更改密码以保护账户安全</p>
                  </div>
                  <button class="setting-btn">修改</button>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <label>登录记录</label>
                    <p>查看最近的登录活动</p>
                  </div>
                  <button class="setting-btn">查看</button>
                </div>
              </div>
            </div>
            
            <div class="settings-section">
              <h3>偏好设置</h3>
              <div class="settings-group">
                <div class="setting-item">
                  <div class="setting-info">
                    <label>主题模式</label>
                    <p>选择浅色或深色主题</p>
                  </div>
                  <select class="setting-select">
                    <option value="auto">跟随系统</option>
                    <option value="light">浅色模式</option>
                    <option value="dark">深色模式</option>
                  </select>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <label>语言设置</label>
                    <p>选择界面显示语言</p>
                  </div>
                  <select class="setting-select">
                    <option value="zh-CN">简体中文</option>
                    <option value="en-US">English</option>
                  </select>
                </div>
              </div>
            </div>
            
            <div class="settings-section danger-section">
              <h3>危险操作</h3>
              <div class="settings-group">
                <div class="setting-item">
                  <div class="setting-info">
                    <label>注销账户</label>
                    <p>永久删除您的账户和所有数据</p>
                  </div>
                  <button class="setting-btn danger-btn">注销账户</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 个人信息编辑弹窗 -->
    <div v-if="showEditProfileModal" class="modal-overlay" @click="closeEditProfile">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑个人信息</h3>
          <button class="close-btn" @click="closeEditProfile">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>用户昵称</label>
            <input 
              type="text" 
              v-model="editProfileForm.userName" 
              placeholder="请输入用户昵称"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label>头像链接</label>
            <input 
              type="url" 
              v-model="editProfileForm.userAvatar" 
              placeholder="请输入头像图片链接"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea 
              v-model="editProfileForm.userProfile" 
              placeholder="请输入个人简介"
              class="form-textarea"
              rows="4"
            ></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeEditProfile" :disabled="editProfileLoading">取消</button>
          <button class="save-btn" @click="saveProfile" :disabled="editProfileLoading">
            {{ editProfileLoading ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserManagement from './UserManagement.vue'
import HeroManagement from './HeroManagement.vue'
import SceneManagement from './SceneManagement.vue'
import SkillManagement from './SkillManagement.vue'
import WeaponPage from './WeaponPage.vue'
import WeaponDisplay from './WeaponDisplay.vue'
import NewsPage from './NewsPage.vue'
import NewsDetail from './NewsDetail.vue'
import HeroPage from './HeroPage.vue'
import ScenePage from './ScenePage.vue'
import { useUserStore } from '../stores/user'

export default {
  name: 'ContentArea',
  components: {
    UserManagement,
    HeroManagement,
    SceneManagement,
    SkillManagement,
    WeaponPage,
    WeaponDisplay,
    NewsPage,
    NewsDetail,
    HeroPage,
    ScenePage
  },
  props: {
    initialPage: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      currentPage: this.initialPage,
      showNewsDetail: false,
      currentNewsArticle: null,
      allNewsArticles: [],
      showVideoDetail: false,
      currentVideo: null,
      // 视听中心所需的状态
      isMainVideoPlaying: false,
      currentVideoIndex: 0,
      videoList: [
        {
          title: '崩坏3 — 最新宣传视频',
          description: '精彩内容抢先看！',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2025/03/26/76321978/b4a4ece87a2000363c936660842dd843_2674802955786817534.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/126674/07b3ff4b33bc634fe72cfd6cf26331cc_6155138484885745843.png'
        },
        {
          title: '崩坏3 — 版本更新预告',
          description: '全新版本内容揭晓。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2025/01/20/76321978/03db0f5fc03255d45096d871fe5df86e_1093835533746303409.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/126673/15849fc85faed63d96d542282717250a_6270630448277626690.png'
        },
        {
          title: '崩坏3 — 角色展示',
          description: '全新角色登场亮相。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/12/17/76321978/9ce0ad1ddcd2cdd1ab7717265346a5e3_8790559258450056518.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/125982/29c59c1e94215affe24daee405ef54c5_2974114339775085989.png'
        },
        {
          title: '崩坏3 — 战斗演示',
          description: '激烈战斗场面展示。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/10/30/76321978/141c00735e5a0a85fe49015cf94369dd_6857929408257596188.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png'
        },
        {
          title: '崩坏3 — 剧情预览',
          description: '精彩剧情内容预告。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/09/27/76321978/aa07605d621d7dd50f3023103c04a07e_2769588059308576112.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20220126/2022012620363380030.png?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 活动宣传',
          description: '限时活动火热进行中。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/08/05/76321978/730e07998de13f2bf4bff4eb7e84cb88_8429380101310045696.mp4',
          poster: 'https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 特别企划',
          description: '特别制作内容放送。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/08/05/76321978/7f20d5dead5b20170429a017674ec115_5474569515951020103.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20210517/2021051715152250556.jpg?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 经典回顾',
          description: '经典内容重温回顾。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/05/16/76321978/11445f251feb8081e42fe20d043c92bd_1613543613873844214.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20211015/2021101519555911370.png?x-oss-process=image/resize,w_475'
        }
      ],
      // 壁纸页面数据
      wallpaperList: [
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20191114/2019111410245787139.jpg?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 1'
        },
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20191114/2019111410241264785.jpg?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 2'
        },
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20191114/2019111410294325619.jpg?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 3'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/124287/c4ed0377fc952bad41205898c6648455_343107267099831894.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 4'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/124286/5c78631030585cdcaaba285f04621b79_5073255841243168279.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 5'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/123619/8e544e360e4fd1327b348a082f03cb88_2737837872241501713.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 6'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/123032/585c2ff64953d4072f9d6d43bbc618fa_6590757920216314604.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 7'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/125154/c1959d404209dff2e5dc504bf0c8dd83_7221168674432906751.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 8'
        },
        {
          url: 'https://fastcdn.mihoyo.com/content-v2/bh3/125966/4a77c70aa7a0593d5f15e3cf15c9e4ba_403053612651052399.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 9'
        },
        {
          url: 'https://webstatic.mihoyo.com/upload/contentweb/2023/01/18/a8a11a84ec864857b8b5ecccde0e3b0d_7518032760986349790.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 10'
        },
        {
          url: 'https://webstatic.mihoyo.com/upload/contentweb/2022/12/14/1809b567ee823bc741cd0d3e355c5891_3955607419716857496.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 11'
        },
        {
          url: 'https://webstatic.mihoyo.com/upload/contentweb/2023/04/18/23ef42cb30f4502d04a3801e73e66347_9108749962091745911.png?x-oss-process=image/resize,w_1024',
          title: '崩坏3精美壁纸 12'
        },
        // {
        //   url: 'https://webstatic.mihoyo.com/upload/contentweb/2023/05/29/3a270384da37efd773b8719c37c33c5b_6880575455532694536.png?x-oss-process=image/resize,w_1024',
        //   title: '崩坏3精美壁纸 13'
        // }
      ],
      userStore: useUserStore(),
      // 个人信息编辑相关状态
      showEditProfileModal: false,
      editProfileForm: {
        userName: '',
        userAvatar: '',
        userProfile: ''
      },
      editProfileLoading: false
    }
  },
  watch: {
    initialPage(newPage) {
      this.currentPage = newPage
    }
  },
  mounted() {
    // 初始化媒体页当前视频
    if (this.videoList && this.videoList.length > 0) {
      this.currentVideoIndex = 0
      this.currentVideo = this.videoList[0]
      this.isMainVideoPlaying = false
    }
  },
  beforeUnmount() {
    // 页面销毁时中止视频播放
    const player = this.$refs?.mainVideoPlayer
    if (player && typeof player.pause === 'function') {
      try { player.pause() } catch (e) { /* ignore */ }
    }
  },
  methods: {
    showNewsDetailHandler(article) {
      this.currentNewsArticle = article
      this.showNewsDetail = true
      this.getAllNewsArticles()
    },
    goBackToNewsList() {
      this.showNewsDetail = false
      this.currentNewsArticle = null
    },
    viewNewsArticle(article) {
      this.currentNewsArticle = article
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    getAllNewsArticles() {
      const newsData = {
        latest: [
          {
            id: 1,
            title: '淬星激斗｜参与活动获取水晶、根源接缘等奖励！',
            summary: '一人选战，三人协攻，在深邃的星光下战斗不休！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/31',
            category: 'events',
            tags: ['活动', '奖励', '水晶']
          }
        ]
      }
      this.allNewsArticles = Object.values(newsData).flat()
    },
    // 播放主视频
    playMainVideo() {
      const player = this.$refs?.mainVideoPlayer
      if (!player) return
      if (player.paused) {
        player.play()
        this.isMainVideoPlaying = true
      } else {
        player.pause()
        this.isMainVideoPlaying = false
      }
    },
    // 切换主视频
    switchVideo(index) {
      if (!this.videoList || index < 0 || index >= this.videoList.length) return
      this.currentVideoIndex = index
      this.currentVideo = this.videoList[index]
      // 切换后自动播放视频
      const player = this.$refs?.mainVideoPlayer
      if (player) {
        try { 
          player.pause()
          // 等待视频源更新后自动播放
          this.$nextTick(() => {
            player.load()
            player.play().then(() => {
              this.isMainVideoPlaying = true
            }).catch(e => {
              console.log('自动播放失败，需要用户手动点击播放')
              this.isMainVideoPlaying = false
            })
          })
        } catch (e) {
          this.isMainVideoPlaying = false
        }
      }
    },
    // 跳转到壁纸子页面（组件内部页面切换）
    goToWallpaperPage() {
      this.currentPage = 'wallpaper'
      // 进入壁纸页时滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    // 前往官方漫画站
    goToComicSite() {
      window.open('https://comic.bh3.com/', '_blank')
    },
    // 从壁纸页返回视听中心
    goBackToMedia() {
      this.currentPage = 'media'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    // 个人信息编辑相关方法
    showEditProfile() {
      // 初始化表单数据
      this.editProfileForm = {
        userName: this.userStore.userInfo?.userName || '',
        userAvatar: this.userStore.userInfo?.userAvatar || '',
        userProfile: this.userStore.userInfo?.userProfile || ''
      }
      this.showEditProfileModal = true
    },
    
    closeEditProfile() {
      this.showEditProfileModal = false
      this.editProfileForm = {
        userName: '',
        userAvatar: '',
        userProfile: ''
      }
    },
    
    async saveProfile() {
      try {
        this.editProfileLoading = true
        
        // 过滤空值
        const updateData = {}
        if (this.editProfileForm.userName.trim()) {
          updateData.userName = this.editProfileForm.userName.trim()
        }
        if (this.editProfileForm.userAvatar.trim()) {
          updateData.userAvatar = this.editProfileForm.userAvatar.trim()
        }
        if (this.editProfileForm.userProfile.trim()) {
          updateData.userProfile = this.editProfileForm.userProfile.trim()
        }
        
        const result = await this.userStore.updateSelfInfo(updateData)
        if (result.success) {
          alert('个人信息更新成功！')
          this.closeEditProfile()
        } else {
          alert('更新失败：' + result.message)
        }
      } catch (error) {
        console.error('更新个人信息失败:', error)
        alert('更新失败：' + error.message)
      } finally {
        this.editProfileLoading = false
      }
    },
    
    // 首页功能卡片导航方法
    navigateToMedia() {
      this.currentPage = 'media'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    navigateToCharacter() {
      this.currentPage = 'character'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    navigateToStage() {
      this.currentPage = 'stage'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
.content-area {
  margin-top: 70px; /* 为顶部导航栏留出空间 */
  min-height: calc(100vh - 70px);
  padding: 40px 0;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 全屏内容样式 */
.fullscreen-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
}

.page-content {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 首页样式 */
.hero-section {
  text-align: center;
  padding: 80px 0;
  margin-bottom: 60px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.3);
}

.hero-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.primary-btn,
.secondary-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.secondary-btn {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.feature-card {
  background: transparent;
  /* backdrop-filter: blur(10px); */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* 通用页面样式 */
.page-title {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 新闻页面样式 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.news-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(10px);
}

.news-image {
  width: 120px;
  height: 80px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  margin-right: 20px;
}

.news-info h3 {
  color: #fff;
  margin-bottom: 10px;
}

.news-info p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.news-date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* 角色页面样式 */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.character-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.character-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.character-avatar {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 50%;
  margin: 0 auto 20px;
}

.character-card h3 {
  color: #fff;
  margin-bottom: 10px;
}

.character-card p {
  color: rgba(255, 255, 255, 0.7);
}

/* 舞台和媒体页面样式 */
.stage-gallery,
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.stage-item,
.media-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.stage-item:hover,
.media-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}

.stage-image,
.media-thumbnail {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  margin-bottom: 15px;
}

.stage-item h3,
.media-item h3 {
  color: #fff;
  text-align: center;
}

/* 用户管理页面样式 */
.user-management-content {
  padding: 0;
  margin: 0;
}

.user-management-content .user-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 英雄管理页面样式 */
.hero-management-content {
  padding: 0;
  margin: 0;
}

.hero-management-content .hero-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 场景管理页面样式 */
.scene-management-content {
  padding: 0;
  margin: 0;
}

.scene-management-content .scene-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 武器页面样式 */
.weapon-content {
  padding: 0;
  margin: 0;
}

.weapon-content .weapon-page {
  margin-top: -40px;
  padding-top: 0;
}

/* 武器管理页面样式 */
.weapon-management-content {
  padding: 0;
  margin: 0;
}

.weapon-management-content .weapon-page {
  margin-top: -40px;
  padding-top: 0;
}

/* 技能管理页面样式 */
.skill-management-content {
  padding: 0;
  margin: 0;
}

.skill-management-content .skill-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 个人中心页面样式 */
.profile-content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  margin: 20px;
  min-height: calc(100vh - 200px);
}

.profile-container {
  max-width: 1000px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  margin-bottom: 30px;
}

.profile-avatar {
  position: relative;
}

.profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.default-profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: bold;
  color: white;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.profile-info h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
}

.profile-role {
  margin: 0 0 8px 0;
  font-size: 16px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.profile-account {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.profile-sections {
  display: grid;
  gap: 30px;
}

.profile-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.profile-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item label {
  font-weight: 600;
  color: #555;
  font-size: 14px;
}

.info-item span {
  color: #333;
  font-size: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 12px;
  color: white;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* 设置页面样式 */
.settings-content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  margin: 20px;
  min-height: calc(100vh - 200px);
}

.settings-container {
  max-width: 800px;
  margin: 0 auto;
}

.settings-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 16px;
  color: white;
}

.settings-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.settings-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.settings-sections {
  display: grid;
  gap: 30px;
}

.settings-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.settings-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.settings-group {
  display: grid;
  gap: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-info label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.setting-btn {
  padding: 8px 16px;
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.setting-btn:hover {
  background: #3d8bfe;
  transform: translateY(-1px);
}

.setting-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.setting-select:focus {
  outline: none;
  border-color: #4facfe;
}

.danger-section {
  border: 1px solid #ffebee;
  background: #fafafa;
}

.danger-section h3 {
  color: #d32f2f;
  border-bottom-color: #ffcdd2;
}

.danger-btn {
  background: #d32f2f;
}

.danger-btn:hover {
  background: #b71c1c;
}

/* 媒体标签 */
.media-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 10px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 新版视听中心页面样式 */
.media-content {
  padding: 0;
  max-width: none;
}

.media-header {
  display: flex;
  align-items: center;
  padding: 20px 60px;
  background: transparent;
  /* backdrop-filter: blur(10px); */
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.media-logo {
  margin-right: 30px;
}

.media-logo img {
  height: 80px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.media-title {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  margin: 0;
}

.media-layout {
  padding: 30px 60px 60px;
}

.media-main {
  display: grid; /** 主布局网格 */
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  height: 600px;
}

.media-section {
  position: relative; /** 相对定位 */
  border-radius: 20px; /** 圆角边框 */
  overflow: hidden; /** 隐藏溢出内容 */
  background: transparent; /** 透明背景 */
  /* backdrop-filter: blur(15px); */ 
  border: 1px solid rgba(255,255,255,0.2); /** 边框 */
  transition: all 0.3s ease; /** 过渡效果 */
}

.media-section:hover {
  transform: translateY(-5px);
  box-shadow: transparent;
}

.section-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 视频区域样式 */
.video-section {
  background: transparent;
}

.main-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */ 
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
  }

.video-info h3 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.video-info p {
  color: rgba(255,255,255,0.9);
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.video-label {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  color: #333;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
}

/* 右侧边栏样式 */
.media-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 壁纸区域样式 */
.wallpaper-section {
  /* flex: 1; * 壁纸区域占满剩余空间 */
  background: transparent; /** 透明背景 */
}

.wallpaper-grid {
  display: grid; /** 壁纸网格布局 */
  grid-template-columns: 1fr ;  
  gap: 5px;  /** 网格间距 */
  padding: 5px; /** 内边距 */
  flex: 1; /** 壁纸区域占满剩余空间 */
}

.wallpaper-item {
  aspect-ratio: 16/9;
}

.wallpaper-placeholder { /** 壁纸占位符 */
  width: 100%; /** 占满父容器宽度 */
  height: 100%; /** 占满父容器高度 */
  background: linear-gradient(45deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); /** 45度线性渐变背景 */
  border-radius: 10px; /** 圆角边框 */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="wallpaper" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.3)"/></pattern></defs><rect width="100" height="100" fill="url(%23wallpaper)"/></svg>');
  transition: all 0.3s ease; /** 壁纸占位符hover缩放动画 */
}

.wallpaper-placeholder:hover { /** 壁纸占位符hover缩放动画 */ 
  transform: scale(1.05);
  background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
}

/* 漫画区域样式 */
.manga-section {
  flex: 1;
  background: transparent;
}

.manga-item {
  padding: 20px;
  flex: 1;
}

.manga-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  border-radius: 15px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="manga" width="15" height="15" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="7" height="7" fill="rgba(255,255,255,0.2)"/><rect x="7" y="7" width="7" height="7" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100" height="100" fill="url(%23manga)"/></svg>');
  transition: all 0.3s ease;
}

.manga-placeholder:hover {
  transform: scale(1.02);
  background: linear-gradient(45deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2));
}

/* 分类标签样式 */
.section-label {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  color: #333;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .media-main {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .media-sidebar {
    flex-direction: row;
  }
  
  .wallpaper-section,
  .manga-section {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .media-header {
    padding: 20px 30px;
    flex-direction: column;
    text-align: center;
  }
  
  .media-logo {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .media-title {
    font-size: 2rem;
  }
  
  .media-layout {
    padding: 30px;
  }
  
  .media-sidebar {
    flex-direction: column;
  }
  
  .wallpaper-grid {
    grid-template-columns: 1fr;
  }
}

.tab-btn.active,
.tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* 视频列表样式 */
.video-list {
  display: flex;
  gap: 10px;
  padding: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.video-list::-webkit-scrollbar {
  height: 6px;
}

.video-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.video-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.video-thumbnail {
  position: relative;
  width: 120px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.video-thumbnail:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.5);
}

.video-thumbnail.active {
  border-color: #ff6b6b;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}

.thumbnail-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .thumbnail-overlay {
  opacity: 1;
}

.play-icon {
  color: white;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 主视频封面样式 */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-poster-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-poster-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.main-play-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.main-play-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.play-icon-large {
  color: #333;
  font-size: 32px;
  margin-left: 4px;
}

/* 壁纸样式 */
.wallpaper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.wallpaper-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.wallpaper-item:hover {
  transform: scale(1.05);
}

.wallpaper-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wallpaper-item:hover .wallpaper-overlay {
  opacity: 1;
}

.wallpaper-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* 壁纸页面样式 */
.wallpaper-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.wallpaper-gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.wallpaper-gallery-item:hover {
  transform: translateY(-5px);
}

.wallpaper-gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.wallpaper-info {
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.wallpaper-info h4 {
  color: white;
  margin: 0;
  font-size: 16px;
}

.back-btn {
  padding: 12px 24px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 漫画样式 */
.manga-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.manga-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.manga-item:hover {
  transform: scale(1.05);
}

.manga-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.manga-item:hover .manga-overlay {
  opacity: 1;
}

.manga-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  color: white;
  margin: 0;
  font-size: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: white;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cancel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.save-btn {
  background: linear-gradient(45deg, #e8f4f8, #f0f8ff);
  color: #333;
  border: 1px solid rgba(135, 206, 235, 0.3);
}

.save-btn:hover:not(:disabled) {
  background: linear-gradient(45deg, #d0e8f0, #e0f0ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3);
}

.cancel-btn:disabled,
.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    padding: 0 15px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 15px 20px;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .features-grid,
  .character-grid,
  .stage-gallery,
  .media-grid {
    grid-template-columns: 1fr;
  }
  
  .news-item {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .video-thumbnail {
    width: 100px;
    height: 56px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .setting-btn, .setting-select {
    width: 100%;
  }
}
</style>